<template>
  <div class="health-intervention-view">
    <!-- 导航标签 -->
    <div class="navigation-tabs">
      <div class="tab" :class="{ 'active': activeTab === 'health-goals' }" @click="activeTab = 'health-goals'">健康目标</div>
      <div class="tab" :class="{ 'active': activeTab === 'intervention-plans' }" @click="activeTab = 'intervention-plans'">干预方案</div>
      <div class="tab" :class="{ 'active': activeTab === 'intervention-platform' }" @click="activeTab = 'intervention-platform'">干预平台</div>
    </div>

    <!-- 健康目标内容 -->
    <div v-if="activeTab === 'health-goals'" class="tab-content">
      <div class="content-layout">
        <!-- 左侧健康目标列表 -->
        <div class="left-panel">
          <div class="panel-header">
            <h3>健康目标</h3>
            <button class="add-btn" @click="showAddGoal">+新增</button>
          </div>
          
          <div class="goals-list">
            <div class="goals-table-header">
              <div class="header-cell">开始日期</div>
              <div class="header-cell">结束日期</div>
              <div class="header-cell">状态</div>
              <div class="header-cell">操作</div>
            </div>
            
            <div 
              v-for="(goal, index) in healthGoals" 
              :key="index"
              class="goal-item"
              :class="{ 'active': selectedGoalIndex === index }"
            >
              <div class="goal-cell">{{ goal.startDate }}</div>
              <div class="goal-cell">{{ goal.endDate }}</div>
              <div class="goal-cell">
                <div class="status-indicator" :class="goal.status"></div>
                {{ goal.statusText }}
              </div>
              <div class="goal-cell">
                <button class="view-btn" @click="viewDetail(index)">查看</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧编辑目标表单 -->
        <div class="right-panel">
          <div class="panel-header">
            <h3>编辑目标</h3>
          </div>
          
          <div class="goal-form">
            <div class="form-row">
              <label class="form-label">目标周期:</label>
              <input 
                type="date" 
                class="form-input date-input"
                v-model="editingGoal.startDate"
              >
              <span class="date-separator">~</span>
              <input 
                type="date" 
                class="form-input date-input"
                v-model="editingGoal.endDate"
              >
            </div>
            
            <div class="indicators-table">
              <table>
                <thead>
                  <tr>
                    <th>项目</th>
                    <th>目标值</th>
                    <th>近期数据</th>
                    <th>测量时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(indicator, index) in healthIndicators" :key="index">
                    <td>{{ indicator.name }}</td>
                    <td>
                      <input 
                        type="text" 
                        class="form-input table-input"
                        v-model="indicator.targetValue"
                      >
                    </td>
                    <td>
                      <input 
                        type="text" 
                        class="form-input table-input"
                        v-model="indicator.recentValue"
                      >
                    </td>
                    <td>
                      <input 
                        type="text" 
                        class="form-input table-input"
                        v-model="indicator.measurementTime"
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <div class="form-actions">
              <button class="save-btn" @click="saveGoal">保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 干预方案内容 -->
    <div v-if="activeTab === 'intervention-plans'" class="tab-content">
      <div class="content-layout">
        <!-- 左侧治疗方案列表 -->
        <div class="left-panel" style="width: 350px;">
          <div class="panel-header">
            <h3>方案新增</h3>
            <button class="add-btn" @click="addPlanItem">+新增</button>
          </div>
          
          <!-- 子标签导航 -->
          <div class="sub-tabs">
            <div 
              class="sub-tab" 
              :class="{ 'active': currentInterventionType === 'medication' }"
              @click="currentInterventionType = 'medication'"
              style="width: 120px;"
            >
              药物治疗
            </div>
            <div 
              class="sub-tab" 
              :class="{ 'active': currentInterventionType === 'diet' }"
              @click="currentInterventionType = 'diet'"
              style="width: 120px;"
            >
              饮食方案
            </div>
            <div 
              class="sub-tab" 
              :class="{ 'active': currentInterventionType === 'exercise' }"
              @click="currentInterventionType = 'exercise'"
              style="width: 120px;"
            >
              运动方案
            </div>
          </div>
          
          <div class="plans-list">
            <div class="plans-table-header">
              <div class="header-cell" v-if="currentInterventionType === 'medication'">治疗药物</div>
              <div class="header-cell">开始日期</div>
              <div class="header-cell">结束日期</div>
              <div class="header-cell">状态</div>
              <div class="header-cell">操作</div>
            </div>
            
            <div 
              v-for="(plan, index) in currentPlans" 
              :key="index"
              class="plan-item"
              :class="{ 'active': selectedPlanIndex === index }"
              @click="selectPlan(index)"
            >
              <div class="plan-cell" v-if="currentInterventionType === 'medication'">{{ plan.name }}</div>
              <div class="plan-cell">{{ plan.startDate }}</div>
              <div class="plan-cell">{{ plan.endDate }}</div>
              <div class="plan-cell">
                <div class="status-indicator" :class="plan.status"></div>
                {{ plan.statusText || plan.status }}
              </div>
              <div class="plan-cell">
                <button class="view-btn" @click.stop="viewPlan(plan)">查看</button>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧编辑方案表单 -->
        <div class="right-panel">
          <div class="panel-header">
            <h3>编辑方案</h3>
          </div>
          
          <div class="plan-form">
            <div class="form-row">
              <label class="form-label">方案周期:</label>
              <input 
                type="date" 
                class="form-input date-input"
                v-model="editingPlan.startDate"
              >
              <span class="date-separator">~</span>
              <input 
                type="date" 
                class="form-input date-input"
                v-model="editingPlan.endDate"
              >
            </div>
            
            <!-- 药物治疗表单 -->
            <div class="form-section" v-if="currentInterventionType === 'medication'">
              <div class="form-row">
                <label class="form-label">方案图片:</label>
                <div class="image-upload">
                  <input 
                    type="file" 
                    accept="image/*" 
                    @change="handleImageUpload"
                    ref="imageInput"
                    style="display: none;"
                  >
                  <button type="button" class="upload-btn" @click="$refs.imageInput.click()">+</button>
                  <span v-if="editingPlan.imageName" class="image-name">{{ editingPlan.imageName }}</span>
                  <div v-if="editingPlan.imagePreview" class="image-preview">
                    <img :src="editingPlan.imagePreview" alt="预览图片" style="max-width: 200px; max-height: 200px; margin-top: 10px;" />
                  </div>
                </div>
              </div>
              
              <div class="form-row">
                <label class="form-label">执行方式:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.executionMethod"
                >
              </div>
              
              <div class="form-row">
                <label class="form-label">单次用量:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dosage"
                >
              </div>
              
              <div class="form-row">
                <label class="form-label">频率:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.frequency"
                >
              </div>
              
              <div class="form-row">
                <label class="form-label">用药提醒:</label>
                <div class="radio-group">
                  <label>
                    <input 
                      type="radio" 
                      name="reminder"
                      v-model="editingPlan.reminder"
                      :value="false"
                    >
                    不提醒
                  </label>
                  <label>
                    <input 
                      type="radio" 
                      name="reminder"
                      v-model="editingPlan.reminder"
                      :value="true"
                    >
                    提醒
                  </label>
                </div>
              </div>
            </div>
            
            <!-- 饮食方案表单 -->
            <div class="form-section" v-else-if="currentInterventionType === 'diet'">
              <div class="form-row">
                <label class="form-label">日摄入脂肪量:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailyWaterIntake"
                  style="width: 100px;"
                >
                <span>g</span>
              </div>
              
              <div class="form-row">
                <label class="form-label">日摄入盐量:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailySaltIntake"
                  style="width: 100px;"
                >
                <span>g</span>
              </div>
              
              <div class="form-row">
                <label class="form-label">日蛋白质摄入:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailyProteinIntake"
                  style="width: 100px;"
                >
                <span>g</span>
              </div>
              
              <div class="form-row">
                <label class="form-label">日碳水摄入:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailyCarbIntake"
                  style="width: 100px;"
                >
                <span>g</span>
              </div>
              
              <div class="form-row">
                <label class="form-label">日饮酒量:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailyFluidIntake"
                  style="width: 100px;"
                >
                <span>ml</span>
              </div>
              
              <div class="form-row">
                <label class="form-label">日吸烟量:</label>
                <input 
                  type="text" 
                  class="form-input"
                  v-model="editingPlan.dailyAlcoholIntake"
                  style="width: 100px;"
                >
                <span>支</span>
              </div>
            </div>
            
            <!-- 运动方案表单占位 -->
            <div class="form-section" v-else-if="currentInterventionType === 'exercise'">
              <p>运动方案表单待实现</p>
            </div>
              
              
            </div>
            
            <div class="form-actions">
              <button class="save-btn" @click="savePlan">保存</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 干预平台内容 -->
    <div v-if="activeTab === 'intervention-platform'" class="tab-content">
      <div class="intervention-platform">
        <!-- 搜索区域 -->
        <div class="search-section">
          <input 
            type="date" 
            class="search-date"
            v-model="searchDate"
            placeholder="请选择日期"
          >
          <button class="search-btn" @click="searchData">搜索</button>
        </div>
        
        <!-- 数据区域 -->
        <div class="data-section">
          <!-- 饮食方案表格 -->
          <div class="data-table">
            <div class="table-header">
              <h3>饮食方案</h3>
            </div>
            <table>
              <thead>
                <tr>
                  <th>项目</th>
                  <th>计划次数</th>
                  <th>实际次数</th>
                  <th>异常次数</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dietData" :key="index">
                  <td>{{ item.item }}</td>
                  <td>{{ item.plannedCount }}</td>
                  <td>{{ item.actualCount }}</td>
                  <td>{{ item.abnormalCount }}</td>
                  <td>
                    <a href="javascript:void(0)" @click="showDietDetail(index)">查看详情</a>
                  </td>
                </tr>
                <tr v-if="dietData.length === 0">
                  <td colspan="5" class="empty-cell">暂无数据</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 运动方案表格 -->
          <div class="data-table">
            <div class="table-header">
              <h3>运动方案</h3>
            </div>
            <table>
              <thead>
                <tr>
                  <th>项目</th>
                  <th>计划次数</th>
                  <th>实际次数</th>
                  <th>异常次数</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in exerciseData" :key="index">
                  <td>{{ item.item }}</td>
                  <td>{{ item.plannedCount }}</td>
                  <td>{{ item.actualCount }}</td>
                  <td>{{ item.abnormalCount }}</td>
                  <td>
                    <a href="javascript:void(0)" @click="showExerciseDetail(index)">查看详情</a>
                  </td>
                </tr>
                <tr v-if="exerciseData.length === 0">
                  <td colspan="5" class="empty-cell">暂无数据</td>
                </tr>
              </tbody>
            </table>
          </div>
          
          <!-- 监测情况表格 -->
          <div class="data-table">
            <div class="table-header">
              <h3>监测情况</h3>
            </div>
            <table>
              <thead>
                <tr>
                  <th>项目</th>
                  <th>计划次数</th>
                  <th>实际次数</th>
                  <th>异常次数</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in monitorData" :key="index">
                  <td>{{ item.item }}</td>
                  <td>{{ item.plannedCount }}</td>
                  <td>{{ item.actualCount }}</td>
                  <td>{{ item.abnormalCount }}</td>
                  <td>
                    <a href="javascript:void(0)" @click="showMonitorDetail(index)">查看详情</a>
                  </td>
                </tr>
                <tr v-if="monitorData.length === 0">
                  <td colspan="5" class="empty-cell">暂无数据</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>

    <!-- 药物治疗详情弹出框 -->
    <div v-if="showPlanDetailDialog" class="dialog-overlay" @click="showPlanDetailDialog = false">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>药物治疗详情</h3>
          <button class="close-btn" @click="showPlanDetailDialog = false">×</button>
        </div>
        <div class="dialog-body">
          <!-- 药物治疗详情 -->
          <div class="detail-section" v-if="detailPlan.id && detailPlan.name !== undefined && detailPlan.name !== ''">
            <div class="detail-row">
              <span class="detail-label">治疗药物:</span>
              <span class="detail-value">{{ detailPlan.name }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">方案周期:</span>
              <span class="detail-value">{{ detailPlan.startDate }} ~ {{ detailPlan.endDate }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">执行方式:</span>
              <span class="detail-value">{{ detailPlan.executionMethod }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">单次用量:</span>
              <span class="detail-value">{{ detailPlan.dosage }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">频率:</span>
              <span class="detail-value">{{ detailPlan.frequency }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">用药提醒:</span>
              <span class="detail-value">{{ detailPlan.reminder ? '提醒' : '不提醒' }}</span>
            </div>
          </div>
          
          <!-- 饮食方案详情 -->
          <div class="detail-section" v-else-if="detailPlan.dailyWaterIntake !== undefined">
            <div class="detail-row">
              <span class="detail-label">方案周期:</span>
              <span class="detail-value">{{ detailPlan.startDate }} ~ {{ detailPlan.endDate }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日摄入水量:</span>
              <span class="detail-value">{{ detailPlan.dailyWaterIntake }} ml</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日摄入盐量:</span>
              <span class="detail-value">{{ detailPlan.dailySaltIntake }} g</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日蛋白质摄入:</span>
              <span class="detail-value">{{ detailPlan.dailyProteinIntake }} g</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日碳水摄入:</span>
              <span class="detail-value">{{ detailPlan.dailyCarbIntake }} g</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日饮水量:</span>
              <span class="detail-value">{{ detailPlan.dailyFluidIntake }} ml</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">日饮酒量:</span>
              <span class="detail-value">{{ detailPlan.dailyAlcoholIntake }} 支</span>
            </div>
          </div>
          
          <div class="detail-section" v-if="detailPlan.image">
            <h4>方案图片</h4>
            <div class="image-preview">
              <img :src="detailPlan.image" alt="方案图片" style="max-width: 100%; max-height: 300px;" />
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="confirm-btn" @click="showPlanDetailDialog = false">确定</button>
        </div>
      </div>
    </div>

    <!-- 新增目标弹出框 -->
    <div v-if="showAddGoalDialog" class="dialog-overlay" @click="showAddGoalDialog = false">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>新增健康目标</h3>
          <button class="close-btn" @click="showAddGoalDialog = false">×</button>
        </div>
        <div class="dialog-body">
          <div class="form-row">
            <label class="form-label">开始日期:</label>
            <input 
              type="date" 
              class="form-input"
              v-model="newGoal.startDate"
            >
          </div>
          <div class="form-row">
            <label class="form-label">结束日期:</label>
            <input 
              type="date" 
              class="form-input"
              v-model="newGoal.endDate"
            >
          </div>
        </div>
        <div class="dialog-footer">
          <button class="cancel-btn" @click="showAddGoalDialog = false">取消</button>
          <button class="confirm-btn" @click="addNewGoal">确定</button>
        </div>
      </div>
    </div>

    <!-- 查看详情弹出框 -->
    <div v-if="showDetailDialog" class="dialog-overlay" @click="showDetailDialog = false">
      <div class="dialog-content" @click.stop>
        <div class="dialog-header">
          <h3>健康目标详情</h3>
          <button class="close-btn" @click="showDetailDialog = false">×</button>
        </div>
        <div class="dialog-body">
          <div class="detail-section">
            <div class="detail-row">
              <span class="detail-label">开始日期:</span>
              <span class="detail-value">{{ healthGoals[selectedGoalIndex]?.startDate }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">结束日期:</span>
              <span class="detail-value">{{ healthGoals[selectedGoalIndex]?.endDate }}</span>
            </div>
            <div class="detail-row">
              <span class="detail-label">状态:</span>
              <span class="detail-value" :class="healthGoals[selectedGoalIndex]?.status">
                {{ healthGoals[selectedGoalIndex]?.statusText }}
              </span>
            </div>
          </div>
          
          <div class="detail-section">
            <h4>指标详情</h4>
            <div class="indicators-detail-table">
              <table>
                <thead>
                  <tr>
                    <th>项目</th>
                    <th>目标值</th>
                    <th>近期数据</th>
                    <th>测量时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(indicator, index) in healthGoals[selectedGoalIndex]?.indicators" :key="index">
                    <td>{{ indicator.name }}</td>
                    <td>{{ indicator.targetValue }}</td>
                    <td>{{ indicator.recentValue }}</td>
                    <td>{{ indicator.measurementTime }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="dialog-footer">
          <button class="confirm-btn" @click="showDetailDialog = false">确定</button>
        </div>
      </div>
    </div>
  
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';

// 激活的标签
const activeTab = ref('health-goals');

// 健康目标数据
const healthGoals = ref([
  {
    startDate: '2023-01-06',
    endDate: '2023-06-06',
    status: 'in-progress',
    statusText: '进行中',
    indicators: [
      {
        name: '体重',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: 'BMI',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '收缩压',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '舒张压',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '空腹血糖',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '餐后2小时血糖',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '总胆固醇',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '甘油三酯',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '低密度脂蛋白',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      },
      {
        name: '高密度脂蛋白',
        targetValue: '',
        recentValue: '',
        measurementTime: ''
      }
    ]
  }
]);

// 当前选中的目标索引
const selectedGoalIndex = ref(0);

// 显示新增目标弹出框
const showAddGoalDialog = ref(false);

// 显示查看详情弹出框
const showDetailDialog = ref(false);

// 编辑中的目标数据
const editingGoal = reactive({
  startDate: '2023-01-06',
  endDate: '2023-06-06'
});

// 新增目标数据
const newGoal = reactive({
  startDate: '',
  endDate: ''
});

// 干预方案相关变量
const currentInterventionType = ref('medication'); // 默认选中"药物治疗"
const medicationPlans = ref([
  {
    name: '',
    startDate: '',
    endDate: '',
    status: '',
    statusText: '',
    executionMethod: '',
    dosage: '',
    frequency: '',
    reminder: false
  }
]);
const dietPlans = ref([]);
const exercisePlans = ref([]);
const selectedPlanIndex = ref(-1); // 当前选中的方案索引

// 编辑方案的临时数据
const editingPlan = reactive({
  id: '',
  name: '',
  startDate: '',
  endDate: '',
  executionMethod: '',
  dosage: '',
  frequency: '',
  reminder: false,
  image: '', // 用于保存图片数据
  imageName: '', // 用于显示文件名
  imagePreview: '', // 用于显示预览图片
  // 饮食方案相关字段
  dailyWaterIntake: '',
  dailySaltIntake: '',
  dailyProteinIntake: '',
  dailyCarbIntake: '',
  dailyFluidIntake: '',
  dailyAlcoholIntake: '',
  status: '进行中'
});

// 详情方案数据
const detailPlan = reactive({
  id: '',
  name: '',
  startDate: '',
  endDate: '',
  executionMethod: '',
  dosage: '',
  frequency: '',
  reminder: false,
  image: '',
  // 饮食方案相关字段
  dailyWaterIntake: '',
  dailySaltIntake: '',
  dailyProteinIntake: '',
  dailyCarbIntake: '',
  dailyFluidIntake: '',
  dailyAlcoholIntake: '',
  status: ''
});

// 显示药物治疗详情弹出框
const showPlanDetailDialog = ref(false);

// 文件输入框引用
const imageInput = ref(null);

// 干预平台数据
const searchDate = ref(''); // 搜索日期
const dietData = ref([
  {
    item: '饮食记录',
    plannedCount: 30,
    actualCount: 25,
    abnormalCount: 2
  },
  {
    item: '营养摄入',
    plannedCount: 30,
    actualCount: 28,
    abnormalCount: 1
  }
]);

const exerciseData = ref([
  {
    item: '有氧运动',
    plannedCount: 15,
    actualCount: 12,
    abnormalCount: 1
  },
  {
    item: '力量训练',
    plannedCount: 10,
    actualCount: 8,
    abnormalCount: 0
  }
]);

const monitorData = ref([
  {
    item: '血压监测',
    plannedCount: 30,
    actualCount: 28,
    abnormalCount: 3
  },
  {
    item: '血糖监测',
    plannedCount: 30,
    actualCount: 29,
    abnormalCount: 2
  }
]);

// 干预平台方法
const searchData = () => {
  console.log('搜索日期:', searchDate.value);
  // 这里可以添加实际的搜索逻辑
  alert(`搜索 ${searchDate.value} 的数据`);
};

const showDietDetail = (index) => {
  console.log('查看饮食方案详情，索引:', index);
  alert(`查看饮食方案详情: ${dietData.value[index].item}`);
};

const showExerciseDetail = (index) => {
  console.log('查看运动方案详情，索引:', index);
  alert(`查看运动方案详情: ${exerciseData.value[index].item}`);
};

const showMonitorDetail = (index) => {
  console.log('查看监测情况详情，索引:', index);
  alert(`查看监测情况详情: ${monitorData.value[index].item}`);
};

// 计算属性：根据当前干预类型返回对应的方案列表
const currentPlans = computed(() => {
  switch (currentInterventionType.value) {
    case 'medication':
      return medicationPlans.value;
    case 'diet':
      return dietPlans.value;
    case 'exercise':
      return exercisePlans.value;
    default:
      return [];
  }
});

// 健康指标
const healthIndicators = reactive([
  {
    name: '体重',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: 'BMI',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '收缩压',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '舒张压',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '空腹血糖',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '餐后2小时血糖',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '总胆固醇',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '甘油三酯',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '低密度脂蛋白',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  },
  {
    name: '高密度脂蛋白',
    targetValue: '',
    recentValue: '',
    measurementTime: ''
  }
]);

// 查看目标
const viewGoal = (index) => {
  selectedGoalIndex.value = index;
  const goal = healthGoals.value[index];
  editingGoal.startDate = goal.startDate;
  editingGoal.endDate = goal.endDate;
  
  // 加载指标数据到编辑状态
  if (goal.indicators && goal.indicators.length > 0) {
    healthIndicators.forEach((indicator, i) => {
      if (goal.indicators[i]) {
        indicator.targetValue = goal.indicators[i].targetValue || '';
        indicator.recentValue = goal.indicators[i].recentValue || '';
        indicator.measurementTime = goal.indicators[i].measurementTime || '';
      }
    });
  } else {
    // 如果没有指标数据，则初始化为空
    healthIndicators.forEach(indicator => {
      indicator.targetValue = '';
      indicator.recentValue = '';
      indicator.measurementTime = '';
    });
  }
};

// 保存目标
const saveGoal = () => {
  if (selectedGoalIndex.value >= 0 && selectedGoalIndex.value < healthGoals.value.length) {
    const goal = healthGoals.value[selectedGoalIndex.value];
    goal.startDate = editingGoal.startDate;
    goal.endDate = editingGoal.endDate;
    
    // 保存指标数据到当前目标
    if (!goal.indicators) {
      goal.indicators = JSON.parse(JSON.stringify(healthIndicators));
    } else {
      // 更新现有指标数据
      goal.indicators = JSON.parse(JSON.stringify(healthIndicators));
    }
    
    alert('目标保存成功！');
  }
};

// 添加新目标
const addNewGoal = () => {
  if (!newGoal.startDate || !newGoal.endDate) {
    alert('请填写完整的目标信息');
    return;
  }
  
  const newGoalItem = {
    startDate: newGoal.startDate,
    endDate: newGoal.endDate,
    status: 'in-progress',
    statusText: '进行中',
    indicators: JSON.parse(JSON.stringify(healthIndicators)) // 复制当前指标配置
  };
  
  // 添加到列表开头
  healthGoals.value.unshift(newGoalItem);
  
  // 选中新添加的目标
  selectedGoalIndex.value = 0;
  editingGoal.startDate = newGoal.startDate;
  editingGoal.endDate = newGoal.endDate;
  
  // 更新其他目标的索引
  // 这里不需要更新其他目标的索引，因为我们在查看时会重新加载数据
  
  // 清空表单
  newGoal.startDate = '';
  newGoal.endDate = '';
  
  // 重置指标数据
  healthIndicators.forEach(indicator => {
    indicator.targetValue = '';
    indicator.recentValue = '';
    indicator.measurementTime = '';
  });
  
  // 关闭弹出框
  showAddGoalDialog.value = false;
};

// 查看详情
const viewDetail = (index: number) => {
  selectedGoalIndex.value = index;
  showDetailDialog.value = true;
};

// 显示新增目标弹出框并清空表单
const showAddGoal = () => {
  // 清空表单
  newGoal.startDate = '';
  newGoal.endDate = '';
  showAddGoalDialog.value = true;
};

// 干预方案相关方法
const selectPlan = (index: number) => {
  selectedPlanIndex.value = index;
  const plan = currentPlans.value[index];
  Object.assign(editingPlan, plan);
};

// 查看方案详情
const viewPlan = (plan) => {
  // 将选中的方案数据复制到详情对象中
  Object.assign(detailPlan, plan);
  // 显示详情弹出框
  showPlanDetailDialog.value = true;
};

// 添加新的方案项
const addPlanItem = () => {
  // 清空编辑表单
  resetEditingPlan();
  
  // 设置默认开始和结束日期
  const today = new Date().toISOString().split('T')[0];
  editingPlan.startDate = today;
  editingPlan.endDate = today;
  
  // 清空文件输入框
  if (imageInput.value) {
    imageInput.value.value = '';
  }
};

// 保存方案
const savePlan = () => {
  
  
  // 根据不同的干预类型创建方案对象
  let planToSave;
  
  if (currentInterventionType.value === 'medication') {
    planToSave = {
      id: editingPlan.id || Date.now(), // 如果是新方案，使用时间戳作为ID
      name: editingPlan.name,
      startDate: editingPlan.startDate,
      endDate: editingPlan.endDate,
      executionMethod: editingPlan.executionMethod,
      dosage: editingPlan.dosage,
      frequency: editingPlan.frequency,
      reminder: editingPlan.reminder,
      image: editingPlan.imagePreview || editingPlan.image, // 保存图片预览或原始图片数据
      status: '进行中'
    };
  } else if (currentInterventionType.value === 'diet') {
    planToSave = {
      id: editingPlan.id || Date.now(),
      startDate: editingPlan.startDate,
      endDate: editingPlan.endDate,
      dailyWaterIntake: editingPlan.dailyWaterIntake,
      dailySaltIntake: editingPlan.dailySaltIntake,
      dailyProteinIntake: editingPlan.dailyProteinIntake,
      dailyCarbIntake: editingPlan.dailyCarbIntake,
      dailyFluidIntake: editingPlan.dailyFluidIntake,
      dailyAlcoholIntake: editingPlan.dailyAlcoholIntake,
      status: '进行中'
    };
  } else if (currentInterventionType.value === 'exercise') {
    planToSave = {
      id: editingPlan.id || Date.now(),
      startDate: editingPlan.startDate,
      endDate: editingPlan.endDate,
      status: '进行中'
    };
  }
  
  // 根据当前干预类型将方案保存到对应的数组中
  if (currentInterventionType.value === 'medication') {
    if (editingPlan.id) {
      // 更新现有方案
      const index = medicationPlans.value.findIndex(plan => plan.id === editingPlan.id);
      if (index !== -1) {
        medicationPlans.value[index] = planToSave;
      }
    } else {
      // 添加新方案
      medicationPlans.value.push(planToSave);
    }
  } else if (currentInterventionType.value === 'diet') {
    if (editingPlan.id) {
      // 更新现有方案
      const index = dietPlans.value.findIndex(plan => plan.id === editingPlan.id);
      if (index !== -1) {
        dietPlans.value[index] = planToSave;
      }
    } else {
      // 添加新方案
      dietPlans.value.push(planToSave);
    }
  } else if (currentInterventionType.value === 'exercise') {
    if (editingPlan.id) {
      // 更新现有方案
      const index = exercisePlans.value.findIndex(plan => plan.id === editingPlan.id);
      if (index !== -1) {
        exercisePlans.value[index] = planToSave;
      }
    } else {
      // 添加新方案
      exercisePlans.value.push(planToSave);
    }
  }
  
  // 重置编辑表单
  resetEditingPlan();
  
  // 清空文件输入框
  if (imageInput.value) {
    imageInput.value.value = '';
  }
};

const resetEditingPlan = () => {
  Object.keys(editingPlan).forEach(key => {
    (editingPlan as any)[key] = '';
  });
  editingPlan.reminder = false;
};
// 处理图片上传
const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    // 保存文件名
    editingPlan.imageName = file.name;
    
    // 创建预览
    const reader = new FileReader();
    reader.onload = (e) => {
      editingPlan.imagePreview = e.target.result;
    };
    reader.readAsDataURL(file);
    
    // 保存文件对象以便后续处理
    editingPlan.image = file;
  } else {
    editingPlan.imageName = '';
    editingPlan.imagePreview = '';
    editingPlan.image = '';
  }
};
</script>

<style scoped>
.health-intervention-view {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 导航标签 */
.navigation-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.tab {
  padding: 16px 24px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
  position: relative;
  font-weight: 500;
}

.tab:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  background-color: #e8e8e8;
}

.tab:hover {
  color: #1890ff;
}

.tab.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
}

/* 标签内容 */
.tab-content {
  flex: 1;
  overflow: hidden;
  display: flex;
}

.content-layout {
  display: flex;
  width: 100%;
  height: 100%;
}

/* 左侧面板 */
.left-panel {
  width: 300px;
  background-color: #fff;
  border-right: 1px solid #e8e8e8;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 20px;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.add-btn {
  padding: 6px 16px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.add-btn:hover {
  background-color: #40a9ff;
}

/* 目标列表 */
.goals-list {
  flex: 1;
  overflow-y: auto;
}

.goals-table-header {
  display: flex;
  padding: 12px 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.header-cell {
  flex: 1;
  text-align: left;
}

.goal-item {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.goal-item:hover {
  background-color: #f5f5f5;
}

.goal-item.active {
  background-color: #e6f7ff;
  border-right: 3px solid #1890ff;
}

.goal-cell {
  flex: 1;
  font-size: 14px;
  color: #333;
  display: flex;
  align-items: center;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}

.status-indicator.in-progress {
  background-color: #1890ff;
}

/* 干预平台样式 */
.intervention-platform {
  padding: 20px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f8f9fa;
}

.search-section {
  margin-bottom: 20px;
  display: flex;
  gap: 15px;
  align-items: center;
  background-color: #fff;
  padding: 15px 20px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.search-date {
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s;
  min-width: 150px;
}

.search-date:focus {
  outline: none;
  border-color: #1890ff;
  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}

.search-btn {
  padding: 10px 20px;
  background-color: #1890ff;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
}

.search-btn:hover {
  background-color: #40a9ff;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.3);
}

.search-btn:hover {
  background-color: #40a9ff;
}

.data-section {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.data-table {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.3s;
}

.data-table:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.table-header {
  padding: 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
}

.table-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.data-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.data-table th,
.data-table td {
  padding: 15px 20px;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.data-table th {
  background-color: #fafafa;
  font-weight: 600;
  color: #666;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-table td {
  color: #333;
  font-size: 14px;
  transition: background-color 0.3s;
}

.data-table tr:hover td {
  background-color: #f9f9f9;
}

.data-table a {
  color: #1890ff;
  text-decoration: none;
}

.data-table a:hover {
  color: #40a9ff;
}

.empty-cell {
  text-align: center;
  color: #999;
  font-style: italic;
}

.view-btn {
  padding: 6px 16px;
  background-color: #ffffff;
  color: #1890ff;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.view-btn:hover {
  background-color: #e6f7ff;
  border-color: #40a9ff;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(24, 144, 255, 0.2);
}

/* 右侧面板 */
.right-panel {
  flex: 1;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding: 20px;
  overflow-y: auto;
}

/* 干预方案相关样式 */
.sub-tabs {
  display: flex;
  border-bottom: 1px solid #e8e8e8;
  background-color: #fafafa;
}

.sub-tab {
  padding: 12px 24px;
  cursor: pointer;
  font-size: 14px;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s;
}

.sub-tab:hover {
  color: #1890ff;
}

.sub-tab.active {
  color: #1890ff;
  border-bottom-color: #1890ff;
  background-color: #fff;
}

.plans-list {
  flex: 1;
  overflow-y: auto;
}

.plans-table-header {
  display: flex;
  padding: 12px 20px;
  background-color: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  font-weight: 600;
  color: #666;
  font-size: 14px;
}

.plan-item {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.plan-item:hover {
  background-color: #f5f5f5;
}

.plan-item.active {
  background-color: #e6f7ff;
}

.plan-cell {
  flex: 1;
  text-align: left;
  font-size: 14px;
  color: #333;
}

.status-indicator {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}

.status-indicator.in-progress {
  background-color: #52c41a;
}

.status-indicator.completed {
  background-color: #1890ff;
}

.status-indicator.pending {
  background-color: #faad14;
}

.view-btn {
  padding: 4px 12px;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
}

.view-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.plan-form {
  padding: 20px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.form-label {
  width: 100px;
  font-size: 14px;
  color: #333;
  margin-right: 16px;
}

.form-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #1890ff;
}

.date-input {
  width: 150px;
  margin-right: 10px;
}

.date-separator {
  margin-right: 10px;
  color: #666;
}

.form-section {
  margin-top: 30px;
  border-top: 1px solid #f0f0f0;
  padding-top: 20px;
}

.form-section h4 {
  margin: 0 0 20px 0;
  font-size: 16px;
  color: #333;
  display: inline-block;
  margin-right: 16px;
}

.add-item-btn {
  padding: 4px 12px;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  font-size: 16px;
  color: #1890ff;
  cursor: pointer;
  transition: all 0.3s;
}

.add-item-btn:hover {
  border-color: #1890ff;
  background-color: #e6f7ff;
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-group label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.radio-group input[type="radio"] {
  margin-right: 6px;
  cursor: pointer;
}

.form-actions {
  margin-top: 30px;
  text-align: center;
}

.save-btn {
  padding: 8px 32px;
  background-color: #52c41a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #73d13d;
}

/* 目标表单 */
.goal-form {
  flex: 1;
  overflow-y: auto;
}

.form-row {
  margin-bottom: 24px;
  display: flex;
  align-items: center;
}

.form-label {
  width: 100px;
  font-weight: 500;
  color: #333;
  margin-right: 16px;
}

.form-input {
  padding: 8px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.3s;
}

.form-input:focus {
  outline: none;
  border-color: #40a9ff;
}

.date-input {
  width: 150px;
  margin-right: 8px;
}

.date-separator {
  margin: 0 8px;
  color: #666;
}

/* 指标表格 */
.indicators-table {
  margin-bottom: 24px;
  overflow-x: auto;
}

.indicators-table table {
  width: 100%;
  border-collapse: collapse;
}

.indicators-table th {
  background-color: #fafafa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
}

.indicators-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.table-input {
  width: 100%;
}

/* 表单操作 */
.form-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 1px solid #e8e8e8;
}

.save-btn {
  padding: 8px 24px;
  background-color: #52c41a;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.save-btn:hover {
  background-color: #73d13d;
}

/* 空内容 */
.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #999;
}

/* 弹出框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.dialog-content {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  width: 500px;
  max-width: 90%;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-btn:hover {
  color: #666;
}

.dialog-body {
  padding: 20px;
}

.dialog-body .form-row {
  margin-bottom: 16px;
}

.dialog-body .form-input {
  flex: 1;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  gap: 10px;
}

.cancel-btn, .confirm-btn {
  padding: 8px 24px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.cancel-btn {
  background-color: #ffffff;
  color: #666;
  border: 1px solid #d9d9d9;
}

.cancel-btn:hover {
  background-color: #f5f5f5;
}

.confirm-btn {
  background-color: #1890ff;
  color: #ffffff;
  border: none;
}

.confirm-btn:hover {
  background-color: #40a9ff;
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background-color: #d9d9d9;
  border-radius: 3px;
}

::-webkit-scrollbar-track {
  background-color: #f0f0f0;
}

/* 详情弹出框样式 */
.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.detail-row {
  display: flex;
  margin-bottom: 12px;
}

.detail-label {
  width: 100px;
  font-weight: 500;
  color: #666;
}

.detail-value {
  flex: 1;
  color: #333;
}

.detail-value.in-progress {
  color: #1890ff;
}

/* 指标详情表格 */
.indicators-detail-table {
  overflow-x: auto;
}

.indicators-detail-table table {
  width: 100%;
  border-collapse: collapse;
}

.indicators-detail-table th {
  background-color: #fafafa;
  padding: 12px;
  text-align: left;
  font-weight: 600;
  color: #333;
  border-bottom: 2px solid #e8e8e8;
}

.indicators-detail-table td {
  padding: 12px;
  border-bottom: 1px solid #f0f0f0;
}
</style>